<template>
  <div class="products">
    <main>
      <div class="cent">产品</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="100%"  height="290px" class="lbt" />
    </main>
    <div class="container animated ">
      <div class="box">
        <!-- 热点图 -->
        <div class="top">
          <div>
            <img src="../../public/picture/banner-1.jpg" alt="" width="875px" height="450px" />
          </div>
          <div class="produc-nav">
            <div class="nav-icon">
              <img src="../../public/image/bkg_grid_hover.png" alt="" width="20px" height="20px" @click="setRow()" />
              <img src="../../public/image/bkg_list_hover.png" alt="" width="20px" height="20px" @click="setColumn()" />
            </div>
            <div class="pro-xl">
              <select name="" id="" @change="px($event)">
                <option value="">精选</option>
                <option value="1">按价格低到高</option>
                <option value="2">按价格高到低</option>
              </select>
            </div>
          </div>
          <!-- 产品展示 -->
          <div class="shop-box">
            <div class="pro-centent">
              <!-- 网格产品展示 -->
              <div class="pro-probox" v-for="item in pro" :key="item.id" v-show="istransform == 'row'">
                <router-link to="/details" @click.native="shopcar(item.img,item.name,item.price)"><img :src="item.img"
                    alt="" width="276px" height="345px" /></router-link>
                <div class="pro-icon4 animated fadeInRight" v-show="istrue">
                  <div><i class="iconfont icon-shangpindaizi icon4"></i>
                  </div>
                  <div><i class="iconfont icon-iconbijiao icon4"></i></div>
                  <div><i class="iconfont icon-xinaixin icon4"></i></div>
                  <div><i class="iconfont icon-yanjing icon4" data-toggle="modal" data-target="#exampleModal"
                      @click="sop(item.img,item.name,item.price,item.id)"></i></div>
                </div>
                <div class="pro-mgl">
                  <p>
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>
                  </p>
                  <span></span>
                  <p>{{item.name}}</p>
                  <p class="price">
                    {{'￥'+item.price}} <span class="delect">{{ item.delect }}</span>
                  </p>
                </div>
              </div>
              <!-- 横向商品展示 -->
              <div class="pro-shooping" v-show="istransform == 'column'" v-for="(item,index) in pagePro"
                :key="index+10">
                <div class="shopping__left sopleft">
                  <img :src="item.img" alt="" width="276px" height="345px" />
                  <span class="the-span-icon yj" @click="sop(item.img,item.name,item.price,item.id)"><i
                      class="iconfont icon-yanjing icon4" data-toggle="modal" data-target="#exampleModal"></i></span>
                </div>
                <div class="shopping__right">
                  <main class="right__top">
                    <p class="right-top__star">
                      <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                        class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                      <i class="iconfont icon-xing icon-ora"></i>
                    </p>
                    <p class="right__name">{{item.name}}</p>
                    <p class="right__price">{{"￥" + item.price}}</p>
                  </main>
                  <p class="right__p--14">
                    以秋色和暖阳为设计主题，打造全新韩式系列，在凛冽冬日，你的爱就像一束阳光，照进了我的心中！向日葵3枝、香槟玫瑰9枝、橙色多头玫5枝、黄色腊梅5枝、尤加利5枝
                  </p>
                  <div class="right__button">
                    <button class="btn right__button-add">加入购物车</button>
                    <button class="btn right__button-collect "><i class="iconfont icon-xinaixin icon4"></i></button>
                    <button class="btn right__button-collect"><i class="iconfont icon-iconbijiao icon4"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div class="pading">
              <button class="btn pading__prev">上一页</button>
              <button class="btn padding__page" :class="{'button--f34f3f': isF34f3f==index}"
                v-for="(item,index) in pageNumber" :key="index" @click="openPage(index)">{{item}}</button>
              <button class="btn pading__next">下一页</button>
            </div>
          </div>
        </div>
        <div class="product-right">
          <div class="pro-lb">
            <h3>自定义类别</h3>
            <a href="javascript:void(0)" v-for="(item, index) in prolb" :key="index">{{ item.name }}</a>
          </div>
          <div class="pro-ml">
            <h3>分类目录</h3>
            <a href="javascript:void(0)" v-for="(item, index) in proml" :key="index"><span> {{ item.name }}</span>
              <span>{{ item.coount }}</span>
            </a>
          </div>
          <div class="color-6">
            <h3>颜色</h3>
            <ul>
              <li><span class="red"></span>红色</li>
              <li><span class="green"></span>绿色</li>
              <li><span class="blue"></span>蓝色</li>
              <li><span class="yellow"></span>黄色</li>
              <li><span class="white"></span>白色</li>
              <li><span class="golden"></span>金色</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div>
              <img :src="mtkimg" alt="" width="437px" height="546px" :title="sopid">
            </div>
            <div>
              <div class="shopping-left">
                <h3>{{sopName}}</h3>
                <div class="sop-price">
                  <span class="price">{{'￥'+sopPrice}}</span>
                  <span class="del">$29.00</span>
                  <span class="yl">-34%</span>
                </div>
                <p class="color-666">
                  <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                    class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                  <i class="iconfont icon-xing icon-ora"></i>
                  无评论
                </p>
              </div>
              <p>
                紫色玫瑰代表成熟的爱，当你的男友向你奉上紫色玫瑰，就表示他想与你共同演绎与童话似的故事--
                王子和公主历尽磨难终于喜结良缘；紫色玫瑰代表你的幸福比我的重要，如果有个男人要送你紫色玫瑰的时候你不要拒绝，
                因为那个人是可以陪你一生的人。
              </p>
              <div class="scn">
                <div class="num">
                  <div class="tj">
                    <button @click="subtract">-</button>
                    <input type="text" v-model.number="num" value="1" oninput="value=value.replace(/[^\d]|^[0]/g,'')">
                    <button @click="add">+</button>
                  </div>
                  <!-- <router-link to='/shop'> -->
                  <button class="addto" @click="scar(mtkimg,sopName,sopPrice,num,sopid)" data-dismiss="modal">
                    添加到购物车
                  </button>
                  <!-- </router-link> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提示框 -->
    <div class="box-prompt">
      成功加入购物车!
    </div>
  </div>
</template>

<style lang="less" scoped>
  ul,
  li {
    list-style: none;
  }

  input,
  button {
    text-align: center;
    border: none;
    outline: none;
  }

  // 提示框
  .box-prompt {
    display: none;
    text-align: center;
    line-height: 50px;
    position: fixed;
    top: 110px;
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    color: #fff;
    width: 200px;
    height: 50px;
    background-color: #FF8000;
  }

  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
      z-index: 30;
    }
  }

  .icon-ora {
    color: #FF9800;
    font-size: 13px;
    margin: 0 2px;
  }

  .shoping-left {
    position: relative;
    width: 290px;
    height: 365px;
    padding: 0 12px;
    border: 1px solid red;

    .the-span-icon {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 18px;
    }
  }

  .container {
    padding: 50px 0 100px 0;
    min-height: 2147px;

    .box {
      width: 1180px;
      height: 2227px;
      padding-right: 0 12px;
      margin: 0 auto;
      display: flex;

      .top {
        width: 900px;
        height: 2227px;
        margin-top: 50px;

        .produc-nav {
          width: 876px;
          height: 64px;
          color: #666666;
          margin: 50px 0 0;
          padding: 0 15px 10px;
          border: 1px solid #e5e5e5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .nav-icon {
            width: 60px;
            height: 20px;
            display: flex;
            justify-content: space-between;
          }

          .pro-xl {
            height: 42px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            select {
              width: 124px;
              outline: none;
              border: 1px solid #e5e5e5;
              padding: 8px 10px;
              height: 42px;
              font-size: 14px;
              font-weight: 400;
              color: #222222;
              padding-right: 35px;
            }
          }

          p {
            color: #666666;
            font-size: 14px;
          }
        }

        //商品展示
        .shop-box {
          height: 1620px;

          .pro-centent {
            width: 900px;
            height: 1560px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            overflow: hidden;

            // 网格展示
            .pro-probox {
              width: 300px;
              height: 477px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              position: relative;

              &:hover .pro-icon4 {
                display: block;
              }

              &:hover {
                z-index: 2;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
                transform: translate3d(0, -2px, 0);
                border: 1px solid rgba(102, 102, 102, 0);
              }

              .pro-icon4 {
                display: none;
                width: 45px;
                height: 204px;
                position: absolute;
                top: 10px;
                right: 30px;

                div {
                  background-color: white;
                  width: 45px;
                  height: 45px;
                  margin-bottom: 6px;
                  border-radius: 50%;
                  text-align: center;
                  line-height: 46px;

                  .icon4 {
                    font-size: 18px;

                    &:hover {
                      color: #f34f3f;
                    }
                  }
                }
              }

              .pro-mgl {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: center;
                text-align: center;

                p {
                  width: 100%;
                }

                .icon-ora {
                  color: #FF9800;
                }

                .price {
                  font-weight: 500;
                  font-size: 15px;
                  color: #f34f3f;

                  .delect {
                    text-decoration: line-through;
                    font-weight: 400;
                    font-size: 12px;
                    margin-left: 5px;
                    color: #666666;
                  }
                }
              }
            }

            // 独占一排显示
            .pro-shooping {
              width: 876px;
              height: 362px;
              margin-top: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .shopping__left {
                position: relative;
                width: 290px;
                height: 365px;
                padding: 0 12px;

                &:hover .the-span-icon {
                  display: block;
                }

                .the-span-icon {
                  position: absolute;
                  top: 10px;
                  right: 15px;
                  font-size: 18px;
                  display: none;
                }
              }

              .shopping__right {
                width: 586px;
                height: 362px;
                padding-left: 25px;

                .right-top__star {
                  //星星
                  margin-bottom: 13px;
                }

                .right__name {
                  // 商品名称
                  margin-bottom: 8px;
                  font-family: "Lora", serif;
                  color: #222222;
                  font-weight: 600;
                  margin-top: 0;
                  line-height: 1.5;
                }

                .right__price {
                  // 商品价格
                  font-weight: 500;
                  font-size: 15px;
                  color: #f34f3f;
                  margin-bottom: 13px;
                }

                .right__p--14 {
                  // 商品描述
                  font-size: 14px;
                  height: 48px;
                  margin-bottom: 16px;
                }

                .right__button {
                  // 购买案件组
                  width: 561px;
                  height: 81px;
                  font-size: 16px;
                  padding-top: 10px;

                  .btn {
                    height: 45px;
                    font-size: 14px;
                    font-weight: 300;
                    margin-right: 15px;
                    background-color: #f34f3f;
                    color: #fff;
                  }

                  .right__button-add {
                    padding: 0 55px;
                    border-radius: 50px;
                  }

                  .right__button-collect {
                    width: 45px;
                    border-radius: 50%;
                  }

                }

              }

            }

          }
        }

        //分页
        .pading {
          width: 876px;
          height: 52px;
          margin-top: 50px;
          padding: 10px 15px;
          border: 1px solid #e5e5e5;
          font-size: 16px;
          color: #666;
          display: flex;
          justify-content: center;

          .btn {
            outline: none;
            border: none;
            padding: 0 12px;
            font-size: 14px;
            background-color: #f1f1f1;
            margin-right: 5px;
          }

          .button--f34f3f {
            background-color: #f34f3f;
          }
        }

      }

      .product-right {
        padding-top: 20px;
        width: 276px;
        height: 1620px;
        margin-top: 10px;

        h3 {
          width: 100%;
          margin-top: 20px;
          margin-bottom: 20px;
          padding-bottom: 10px;
          font-size: 15px;
          font-weight: 500;
          line-height: 20px;
          border-bottom: 1px solid #e1e1e1;
        }

        a {
          width: 100%;
          font-size: 14px;
          color: #666666;
          transition: all 0.3s linear;
          margin-top: 10px;

          &:hover {
            color: #f34f3f;
          }
        }

        .pro-lb {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

        .pro-ml {
          a {
            display: flex;
            justify-content: space-between;
          }
        }

        .color-6 {
          ul {
            width: 100%;
            height: 100%;

            li {
              width: 25%;
              float: left;

              // flex-wrap: wrap;
              // justify-content: space-between;
              span {
                width: 14px;
                height: 14px;
                display: inline-block;
                border: 1px solid #e5e5e5;
                margin-right: 3px;
              }

              .red {
                background-color: red;
              }

              .green {
                background-color: green;
              }

              .blue {
                background-color: blue;
              }

              .yellow {
                background-color: yellow;
              }

              .white {
                background-color: white;
              }

              .golden {
                background-color: gold;
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import shop from '@/shop.js'
  export default {
    data() {
      return {
        num: 1,
        istrue: true,
        mtkimg: null, //模态框的图片
        sopName: null, //模态框的吗，名字 
        sopPrice: null, //模态框的价格
        sopid: null, //模态框的价格
        scarimg: '',
        scarname: '',
        scarprice: '',
        istransform: 'row', // 切换行和列
        isF34f3f: 0, // 控制分页按钮的颜色
        pageNumber: 1,
        pro: [], // 商品
        prolb: [],
        pagePro: [], // 分页专用数组
        proml: [],
      };
    },

    methods: {
      sop(img, name, price, id) { // 模态框
        this.mtkimg = img;
        this.sopName = name;
        this.sopPrice = price;
        this.sopid = id;
      },

      setRow() { // 行排序
        this.istransform = "row";
        this.startPading(9);
      },

      setColumn() { // 列排序
        this.istransform = "column";
        this.startPading(4);
      },

      startPading(pageNumber) { // 分页
        var proLength = this.pro.length;
        if (pageNumber == 9) {
          this.pageNumber = Math.ceil(proLength / pageNumber);
        } else if (pageNumber == 4) {
          this.pageNumber = Math.ceil(proLength / pageNumber);
        }
      },

      openPage(index) { // 分页具体内容
        this.isF34f3f = index;
        var newArr = [];
        var i = (index) * 4,
          b = i + 5;
        if (this.pageNumber != 1) {
          if (i + 4 > this.pro.length) {
            for (i; i <= this.pro.length-1; i++) {
              newArr.push(this.pro[i]);
            }
            console.log(3);
            this.pagePro = newArr;
          } else {
            for (i; i < b; i++) {
              newArr.push(this.pro[i]);
            }
            this.pagePro = newArr;
          }
        };
      },

      shopcar(img, name, price) { // 商品详情
        setTimeout(() => {
          shop.$emit('shopcar', {
            img,
            name,
            price
          })
        }, 60);
      },

      px(evevt) { //排序
        if (event.target.value == '1') {
          this.pro.sort(this.sortdg('price'))
        } else if (event.target.value == '2') {
          this.pro.sort(this.sortgd('price'))
          console.log(2);
        }
      },

      sortdg(price) { // 升序
        return function (a, b) {
          let val1 = a[price];
          let val2 = b[price];
          return val1 - val2;
        }
      },

      sortgd(price) { //降序
        console.log(2);
        return function (a, b) {
          let val1 = a[price];
          let val2 = b[price];
          return val2 - val1;
        }
      },

      scar(img, name, price, num, id) { // 加入购物车
        // console.log(img, name, price, num, id)
        var shopcar = {
          id: id,
          img: img,
          name: name,
          price: price,
          num: num
        };
        this.num = 1;
        this.$store.commit('add', shopcar);
        setTimeout(() => {
          $(".box-prompt").fadeIn()
          setTimeout(() => {
            $(".box-prompt").fadeOut()
          }, 1500);
        }, 100);
      },

      add() {
        this.num++;
      },

      subtract() {
        if (this.num == 0) {
          this.num = 0
        } else {
          this.num--;
        }
      },
    },

    mounted() {
      this.$axios.get('http://121.196.102.99:3000/products').then((res) => { //发送请求的url
          console.log(res)
          this.pro = res.data.pro;
          this.prob = res.data.prob;
          this.proml = res.data.proml
          for (var i = 0; i < 5; i++) {
            this.pagePro.push(res.data.pro[i]);
          }
        }) //响应回来触发的回调函数
        .catch((err) => {
          console.log(err)
        }) //请求出现错误时回调函数 
      window.scrollTo(0, 0);
    },

  };
</script>